<template>
  <div class="main">
    <div class="left">
      <el-form :model="validateForm" ref="validateForm" label-width="100px">
        <el-form-item
          label="类型"
          prop="type"
          :rules="[{ required: true}]"
        >
          <el-select class="select" v-model="validateForm.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="X轴名称"
          prop="x"
          :rules="[
      { required: true, message: 'X轴名称不能为空'},
    ]"
        >
          <el-input type="text" v-model="validateForm.x" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="Y轴名称"
          prop="y"
          :rules="[
      { required: true, message: 'Y轴名称不能为空'},
    ]"
        >
          <el-input type="text" v-model="validateForm.y" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="X轴刻度"
          prop="xx"
          :rules="[
      { required: true, message: 'X轴刻度不能为空'},
    ]"
        >
          <el-input type="text" v-model="validateForm.xx" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="Y轴范围"
          prop="yy"
          :rules="[
      { required: true, message: 'Y轴范围不能为空'},
    ]"
        >
          <el-input type="text" v-model="validateForm.yy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="数据"
          prop="line"
          :rules="[
      { required: true, message: '数据不能为空'},
    ]"
        >
          <el-input type="textarea" v-model="validateForm.line" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createPic">提交</el-button>
          <el-button @click="resetForm('validateForm')">重置</el-button>
          <el-button v-if="showimg" @click="downloadimg" class="download">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <img v-if="showimg" :src="picPath+picName" width="500px">
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "createPic",
  data() {
    return {
      input: '',
      showimg: false,
      picName: '',
      picPath: process.env.VUE_APP_BASE_API + '/profile/download/',
      options: [{
        value: 'zhe',
        label: '折线图'
      }, {
        value: 'zhu',
        label: '柱状图',
        disabled: true
      }],
      value: '',
      validateForm: {
        type: '',
        x: '',
        y: '',
        xx: '',
        yy: '',
        line: ''
      }
    }
  },
  methods: {
    async createPic() {
      let res = await request({
        url: `tools/createPic`,
        headers: {
          isToken: true
        },
        method: 'post',
        data: this.validateForm
      })
      if (res.code !== 200) {
        alert(res.msg)
      } else {
        this.picName = res.data
        this.showimg = true
      }
    },
    downloadimg() {
      if (this.picName) {
        this.$download.name(this.picName, false)
      } else {
        alert('下载失败，请刷新后重试！')
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style scoped>
button {
  margin: 0px 5px 0px 5px;
}

.download {
  margin: 10px;
}

img {
  position: relative;
  top: 30px;
}

input {
  margin: 3px;
  padding: 5px;
}

.select {
  float: left;
}

.main {
  position: relative;
}

.left {
  position: absolute;
  width: 40%;
  padding: 50px;
  float: left;
}

.right {
  position: relative;
  float: right;
  width: 60%;
}
</style>
